<template>
  <div class="form">
    <van-nav-bar title="我填的表" left-arrow @click-left="$router.go(-1)" />
    <div class="head">
      <div class="txt-s">
        <p>请上传文件</p>
        <van-uploader>
          <van-button icon="plus" type="primary">上传文件</van-button>
        </van-uploader>
      </div>
      <div class="txt-s">
        <p>请输入时间</p>
        <van-cell title="请输入时间" :value="date" @click="show = true" />
        <van-calendar v-model="show" @confirm="onConfirm" />
      </div>
      <div class="txt-s">
        <p>请输入手机号</p>
        <div>
          <P>176xxxxxxxx</P>
        </div>
      </div>
      <div class="txt-s">
        <p>请选择省市区县</p>
        <div>
          <p>xx省xx市xx县</p>
        </div>
      </div>
      <div class="txt-s">
        <p>请输入邮箱地址</p>
        <div>
          <p>xx@xx.com</p>
        </div>
      </div>
    </div>
    <div class="foot">
      <van-pagination
        v-model="currentPage"
        :total-items="50"
        :show-page-size="2"
        :page-count="2"
      >
        <template #prev-text>
          <van-icon name="arrow-left" />
        </template>
        <template #next-text>
          <van-icon name="arrow" />
        </template>
        <template #page="{ text }">{{ text }}</template>
      </van-pagination>
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import { Pagination } from "vant";

Vue.use(Pagination);
import { Uploader } from "vant";

Vue.use(Uploader);
import { Calendar } from "vant";

Vue.use(Calendar);
export default {
  data() {
    return {
      currentPage: 1,
      date: "",
      show: false,
    };
  },
  methods: {
    formatDate(date) {
      return `${date.getMonth() + 1}/${date.getDate()}`;
    },
    onConfirm(date) {
      this.show = false;
      this.date = this.formatDate(date);
    },
  },
};
</script>

<style >
.form {
  overflow: hidden;
  width: 375px;
}
.head {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.foot {
  position: fixed;
  bottom: 0;
  width: 100%;
}
.van-icon-arrow-left:before {
  color: black;
  font-size: 20px;
  font-weight: bold;
}
.van-nav-bar__title {
  font-size: 17px;
}
.txt-s > p {
  color: #888888;
  font-size: 14px;
}
.txt-s {
  border-bottom: 1px solid #eeeeee;
  width: 95%;
  margin: 10px;
}
.van-uploader {
  margin-bottom: 10px;
}
.van-pagination__next > .van-icon-arrow:before {
  color: black;
  font-size: 20px;
  font-weight: bold;
}
</style>